<template>
  <div style="margin-top: 10px"
       v-loading="fullloading">
    <div style="margin-bottom: 10px;display: flex;justify-content: center;align-items: center">
      <el-input clearable
                placeholder="输入支付方式检索"
                prefix-icon="el-icon-search"
                size="small"
                style="width: 400px;margin-right: 10px"
                v-model="keywords">
      </el-input>
      <el-button size="small"
                 type="primary"
                 icon="el-icon-search"
                 v-perm="'b:payment:query'"
                 @click="searchClick">搜索</el-button>
      <el-tooltip content="新建渠道信息"
                  placement="right">
        <el-button size="small"
                   type="primary"
                   icon="el-icon_search"
                   style="margin_left: 20px"
                   v-perm="'b:payment:add'"
                   @click="addMode">新增</el-button>
      </el-tooltip>
    </div>
    <div style="display: flex;justify-content: space-around;flex-wrap: wrap;text-align: left">
      <el-card style="width: 350px;margin-bottom: 20px"
               v-for="(item,index) in hrs"
               :key="item.id"
               v-loading="cardLoading[index]">
        <div slot="header"
             class="clearfix">
          <span>{{item.sysOrganization.orgName}}</span>
          <el-tooltip content="删除渠道信息"
                      placement="top">
            <el-button type="text"
                       style="color: #f6061b;margin-left: 13px;;float: right; padding: 3px 0;width: 15px;height:15px"
                       icon="el-icon-delete"
                       v-perm="'b:payment:delete'"
                       @click="deleteMode(item.id)"></el-button>
          </el-tooltip>
          <el-tooltip content="编辑支付模板"
                      placement="top">
            <el-button type="text"
                       style="margin: 0px;float: right; padding: 3px 0;width: 15px;height:15px"
                       icon="el-icon-edit"
                       v-perm="'b:payment:update'"
                       @click="editMode(item.id,item.orgId,item.modeCode,item.modeName)"></el-button>
          </el-tooltip>
        </div>
        <div>
          <div style="width: 100%;display: flex;justify-content: center">
            <img :src="item.picUrl"
                 alt="item.picUrl"
                 style="width: 70px;height: 70px;border-radius: 70px">
          </div>
          <div style="margin-top: 20px">
            <div>
              <span class="configs-info">支付方式:</span>
              <span class="user-info">{{item.modeName}}</span>
              <el-tooltip content="编辑配置信息"
                          placement="top">
                <el-button type="text"
                           style="color: #f6061b;float: right; padding: 0px 0;width: 25px;height:25px"
                           icon="el-icon-edit"
                            v-perm="'b:paymentconfig:update'"
                           @click="editConfig(item.id,item.sysOrganization.orgName,item.modeName)"></el-button>
              </el-tooltip>
            </div>
          </div>
          <div class="configs-info">
            配置名称:
            <el-tag v-for="role in item.sysPaymentConfigs"
                    :key="role.id"
                    type="success"
                    size="mini"
                    style="margin-right: 5px"
                    :disable-transitions="false">{{role.configName}}
            </el-tag>
          </div>
        </div>
      </el-card>
    </div>
    <!--弹出窗口：新增/编辑渠道-->
    <el-dialog :title="textMap[dialogStatus]"
               :visible.sync="dialogFormVisible"
               width="20%">
      <el-form :rules="rules"
               ref="dataForm"
               :model="temp"
               label-position="left"
               label-width="150px">
        <el-form-item label="所属机构"
                      prop="orgId">
          <el-select v-model="temp.orgId"
                     placeholder="请选择"
                     :disabled="this.orgId !== '0'">
            <el-option v-for="org in orgData"
                       :key="org.id"
                       :value="org.id"
                       :label="org.orgName">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="支付Code"
                      prop="modeCode">
          <el-input v-model="temp.modeCode"></el-input>
        </el-form-item>
        <el-form-item label="支付名称"
                      prop="modeName">
          <el-input v-model="temp.modeName"></el-input>
        </el-form-item>
        <el-form-item label="排序"
                      prop="sortNo">
          <el-input-number size="small"
                           v-model="temp.sortNo"></el-input-number>
        </el-form-item>
        <el-form-item label="支付图标">
          <el-upload class="avatar-uploader"
                     :width="100"
                     height="100"
                     list-type="picture-card"
                     :show-file-list="false"
                     accept=".jpg,.jpeg,.png,.gif">
            <!-- <img v-if="dataForm.picUrl" :src="dataForm.picUrl" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button v-if="dialogStatus=='create'"
                   type="primary"
                   @click="createData">创建</el-button>
        <el-button v-else
                   type="primary"
                   @click="updateData">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import optionApi from '@/api/option'
import { resetTemp } from '@/utils'
import paymentmodeApi from '@/api/paymentmode'
import { confirm } from '@/utils/constants'

export default {

  data() {
    return {
      keywords: '',
      fullloading: false,
      hrs: [],
      cardLoading: [],
      eploading: [],
      moreBtnState: false,
      dialogStatus: '',
      dialogFormVisible: false,
      textMap: {
        update: '编辑渠道',
        create: '新增渠道'
      },
      temp: {
        idx: null,
        orgId: null,
        modeCode: null,
        modeName: null,
        sortNo: null,
        picUrl: null
      },
      orgData: [],
      orgMap: new Map(),
      rules: {
        orgId: [{ required: true, message: '所属机构不能为空', trigger: 'blur' }],
        modeCode: [{ required: true, message: 'code不能为空', trigger: 'blur' }],
        modeName: [{ required: true, message: '支付渠道不能为空', trigger: 'blur' }]
      }
    }
  },
  computed: {
    ...mapGetters([
      'orgId'
    ])
  },
  created: function() {
    this.initCards()
    this.initData()
  },
  methods: {
    initData() {
      optionApi.listOrgOptions().then(res => {
        res.data.orgOptions.forEach(obj => {
          this.orgData.push(obj)
          this.orgMap.set(obj.id, obj.orgName)
        })
      })
    },
    searchClick() {
      this.initCards()
    },
    editConfig(modeId, orgName, modeName) {
      this.$router.push({ path: '/system/payment_mode/' + modeId + '/config', query: { orgName: orgName, modeName: modeName }})
    },
    // 编辑模板
    editMode(id, orgId, modeCode, modeName) {
      resetTemp(this.temp)
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
      this.temp.id = id
      this.temp.orgId = orgId
      this.temp.modeCode = modeCode
      this.temp.modeName = modeName
    },

    updateData() {
      this.$refs['dataForm'].validate((valid) => {
        if (!valid) return
        paymentmodeApi.updatePaymentMode(this.temp).then((res) => {
          this.initCards()
          this.dialogFormVisible = false
          this.$message.success('更新成功')
        })
      })
    },

    // 新增模板
    addMode() {
      resetTemp(this.temp)
      if (this.orgId !== '0') {
        this.temp.orgId = this.orgId
      }
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },

    createData() {
      this.$refs['dataForm'].validate((valid) => {
        if (!valid) return
        paymentmodeApi.addPaymentMode(this.temp).then((res) => {
          this.initCards()
          this.dialogFormVisible = false
          this.$message.success('添加成功')
        })
      })
    },

    initCards() {
      var _this = this
      var searchWords
      searchWords = this.keywords
      paymentmodeApi.queryPaymentData({ orgId: this.orgId, searchWords: searchWords }).then(res => {
        _this.hrs = res.data.list
        var length = res.data.length
        _this.cardLoading = Array.apply(null, Array(length)).map(function(item, i) {
          return false
        })
        _this.eploading = Array.apply(null, Array(length)).map(function(item, i) {
          return false
        })
      })
    },
    deleteMode(hrId) {
      var _this = this
      this.$confirm('您确定要删除该支付渠道？', '提示', confirm).then(() => {
        this.fullloading = true
        paymentmodeApi.deletePaymentMode({ id: hrId }).then(res => {
          _this.fullloading = false
          _this.initCards()
          this.$message.success('删除成功')
        })
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    }
  }
}
</script>
<style>
.user-info {
  font-size: 18px;
  color: #aa095a;
}
.configs-info {
  font-size: 12px;
  color: rgb(0, 7, 1);
}
</style>
